<template>
  <div class="bg-grey w-full h-full">
    <van-dialog
      confirmButtonColor="#fd4f51"
      v-model="editShow"
      title="修改"
      show-cancel-button
      @confirm="changeGoodsDetail()"
    >
      <div class="p-10">
        <van-field ref="edit" type="number" v-model="editValue" :placeholder="editPlaceholder" />
      </div>
    </van-dialog>
    <van-nav-bar class="bg-red text-white" title="商品">
      <van-icon @click="$router.go(-1)" class="fs-18" name="arrow-left" slot="left" />
      <router-link tag="div" :to="{path: `/goods/add`, query: {id: detail.id}}" slot="right">编辑</router-link>
    </van-nav-bar>
    <!-- 展示图 -->
    <div class="relative">
      <img class="w-full min-h-100 fs-12 text-grey" :src="detail.picture" alt="商品图片" />
      <div
        class="w-full h-33 bg-rgba-white absolute bottom-0 left-0 w-full flex p-5 p-h-10 text-grey fs-12 o-x-scroll"
      >
        <div
          v-for="item in detail.sptz"
          :key="item"
          class="bg-block-grey b-r-3 p-v-2 p-h-10 flex-s-0 m-r-8"
        >{{item}}</div>
      </div>
    </div>
    <!-- 价格标题 -->
    <div class="bg-white p-10">
      <div>
        <div v-if="detail.yhtype === 1" class="flex">
          <!-- 折扣 -->
          <p class="text-red fs-18 flex a-center" @click="handleEdit('zk')">
            {{detail.zk / 10}} 折
            <van-icon name="edit" />
          </p>
          <p class="text-grey fs-12 p-v-5 m-l-10">
            门市价
            <s v-if="detail.fprice">¥{{detail.fprice}}</s>
          </p>
        </div>
        <div v-else>
          <p class="text-red fs-18">折扣价 ¥{{detail.nprice}}</p>
          <p v-if="detail.fprice" class="text-grey fs-12 p-v-5 m-l-10">
            门市价
            <s v-if="detail.fprice">¥{{detail.fprice}}</s>
          </p>
        </div>
        <p class="text-content fs-14overflow-many fs-14">{{detail.gname}}</p>
      </div>
    </div>
    <!-- 限额 -->
    <div class="bg-white p-10 m-t-10">
      <div class="m-b-10 flex">
        <van-tag plain type="danger">单人日限额</van-tag>
        <p class="fs-12 m-l-10 text-grey" @click="handleEdit('rxe')">
          <span>剩余{{detail.rxe}}{{detail.unit}}</span>
          <van-icon class="m-l-5" name="edit" />
        </p>
      </div>
      <div class="flex">
        <van-tag plain type="danger">日预约限额</van-tag>
        <p class="fs-12 m-l-10 text-grey flex a-center" @click="handleEdit('yye')">
          <span>剩余{{detail.yye}}{{detail.unit}}</span>
          <van-icon class="m-l-5" name="edit" />
        </p>
      </div>
    </div>
    <!-- 描述 -->
    <div class="bg-white p-10 m-t-10 flex">
      <p class="fs-12 text-grey min-w-50">商品描述</p>
      <p class="fs-12 text-content m-l-10">{{detail.spms}}</p>
    </div>
    <div class="bg-white p-10 p-b-0 m-t-10 m-b-20">
      <p class="fs-14 p-v-5 text-title">下单明细</p>
      <div class="flex j-between a-center p-v-5 fs-14 text-content">
        <div>姓名</div>
        <div>下单时间</div>
        <div>数量</div>
        <div>总价</div>
      </div>
      <div class="h-200 o-y-scroll scroll-touch">
        <div
          v-for="item in 10"
          :key="item"
          class="flex j-between a-center p-v-10 fs-12 text-grey b-b"
        >
          <div>李明</div>
          <div>2019-02-17</div>
          <div>5</div>
          <div>¥5000</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/images/merchant.jpg'

export default {
  data () {
    return {
      ready: false,
      logo,
      detail: {},
      editShow: false,
      editType: '',
      editPlaceholder: '',
      editValue: null
    }
  },
  mounted () {
    this.init()
  },
  methods: {
    init () {
      this.getDetail()
    },
    handleEdit (type) {
      this.editShow = true
      switch (type) {
        case 'zk':
          this.editType = 'zk'
          this.editPlaceholder = '请输入折扣范围0-100, 10 = 1.0折'
          break
        case 'rxe':
          this.editType = 'rxe'
          this.editPlaceholder = '请输入商品单人每日销售限额'
          break
        case 'yye':
          this.editType = 'yye'
          this.editPlaceholder = '请输入商品每日销售限额'
          break
      }
    },
    async changeGoodsDetail () {
      const submit = async (type, url) => {
        const toast = this.$toast({
          message: '正在修改...',
          duration: 0
        })
        let { message, status } = await this.$api.post(url, {
          id: this.detail.id,
          [type]: this.editValue
        })
        toast.clear()
        return { message, status }
      }
      let message, status
      if (this.editType === 'zk') {
        let res = await submit('zk', '/zxGd/zk/update')
        message = res.message
        status = res.status
      } else if (this.editType === 'rxe') {
        let res = await submit('rxe', '/zxGd/rxe/update')
        message = res.message
        status = res.status
      } else if (this.editType === 'yye') {
        let res = await submit('yye', '/zxGd/kc/update')
        message = res.message
        status = res.status
      }
      if (status === 0) {
        this.$toast.success(message)
        if (this.editType === 'yye' || this.editType === 'rxe') {
          this.detail[this.editType] = this.editValue
        }
      } else {
        this.$toast.fail(message)
      }
      this.editValue = null
    },
    async getDetail () {
      let { id } = this.$route.params
      if (!id) this.$router.push('/')
      let { status, zxGd } = await this.$api.post('/zxGd/queryById', {
        id
      })
      if (status === 0) {
        zxGd.sptz = zxGd.sptz.split(',').filter(d => d !== '')
        this.detail = zxGd
      }
      this.ready = true
    },
    changeSwiperIndex (index) {
      this.swiperCurrentIndex = index
    }
  }
}
</script>

<style lang="scss" scoped>
.van-nav-bar .van-icon {
  color: #fff !important;
}
.van-nav-bar__title {
  color: #fff !important;
}
.van-hairline--bottom::after {
  border: none;
}
.b-grey {
  border-color: #b3b3b3;
}
.h-33 {
  height: 33px;
}
.bg-lightred {
  background: #ffeddf;
}
</style>
